<template>
	<view class="content">
		<h1><image src="../../static/img/login_logo.png"></image></h1>
		<h2>诺和医疗</h2>
		<text>为了提供优质服务，请先授权登录</text>
		
		<button v-if="!phoneNumber" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号码</button>
		<button v-else @tap="login">微信授权</button>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				phoneNumber:null
			}
		},
		onLoad() {
			this.phoneNumber = uni.getStorageSync('phoneNumber')
		},
		methods: {
			// 第一步 获取手机号码
			getPhoneNumber (e) {
				this.$api({
					url:'/getPhoneNumber',
					method: "GET",
					data:{
						code: e.detail.code
					}
				}).then(res=>{
					uni.setStorageSync('phoneNumber',res.phone_info.phoneNumber)
					this.phoneNumber = res.phone_info.phoneNumber
				})
			},
			login() {
				wx.login({
					success:(res)=>{
						if (res.code) {
							this.$api({
								url:'/code2Session',
								method: "GET",
								data:{
									code:res.code
								}
							}).then(res=>{
								uni.setStorageSync('openid',res.openid)
								this.openid = res.openid
								this.auth2Login()
							})
							
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			auth2Login(){
				this.$api({
					url:'/user/auth2Login',
					method: "POST",
					data:{
						openId:this.openid,
						userMobile:this.phoneNumber
					}
				}).then(res=>{
					uni.setStorageSync('token',res.token)
					uni.switchTab({
						url: '/pages/index/index'
					});
				})
			},
		}
	}
	
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
		h1 {
			width: 148rpx;
			height: 148rpx;
			background: #dc261b;
			border-radius: 28rpx;
			overflow: hidden;
			image {
				width: 148rpx;
				height: 148rpx;
			}
		}
		h2 {
			font-size: 32rpx;
			margin: 20rpx 0 0;
		}
		text {
			font-size: 28rpx;
			margin: 70rpx 0 30rpx;
			color: #999;
		}
		button {
			width: 580rpx;
			height: 84rpx;
			line-height: 84rpx;
			background: #dc261b;
			font-size: 28rpx;
			text-align: center;
			color: #fff;
			border-radius: 50rpx;
		}
	}
</style>
